<template>
  <q-table
    class="no-border-radius full-height bg-transparent"
    :title="$q.screen.gt.xs ? '作业方案列表' : null"
    :card-container-style="{ overflow: 'auto' }"
    card-container-class="q-pa-sm content-start"
    grid
    :rows="plans"
    :filter="filter"
    :pagination="{ rowsPerPage: 16 }"
    hide-header
  >
    <template v-slot:top-right>
      <new-plan ref="newPlan" />
      <modify-plan ref="modifyPlan" />
      <div class="row q-gutter-x-md items-center">
        <q-input
          outlined
          dense
          debounce="300"
          v-model="filter"
          placeholder="搜索方案名称"
          v-if="$q.screen.gt.xs"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
        <q-btn
          color="primary"
          icon="add"
          @click="newPlan.show()"
          label="新增方案"
        />
      </div>
    </template>
    <template v-slot:item="props">
      <div class="q-pa-sm col-xs-6 col-sm-4 col-md-3">
        <q-card @click="modifyPlan.show(props.row)">
          <q-card-section>
            <strong class="text-h6 text-black">{{ props.row.name }}</strong>
          </q-card-section>
          <q-separator />
          <q-list dense class="q-pa-sm">
            <q-item dense clickable v-ripple>
              <q-item-section side>类型</q-item-section>
              <q-item-section class="text-right">{{
                cmdName[props.row.type]
              }}</q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section side>描述</q-item-section>
              <q-item-section class="text-right">{{
                props.row.description
              }}</q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </template>
  </q-table>
</template>

<script>
import { useQuasar } from "quasar";
import { useAPIStore } from "stores/api/index.js";
import { onMounted, provide, ref } from "vue";
import { api } from "boot/axios.js";

import NewPlan from "components/actionPlan/NewPlan.vue";
import ModifyPlan from "components/actionPlan/ModifyPlan.vue";

export default {
  name: "PlanTable",
  components: {
    ModifyPlan,
    NewPlan,
  },
  setup() {
    const $q = useQuasar();
    const plans = ref([]);

    function getPlans() {
      api
        .get(useAPIStore().centerUrl + "plan/all")
        .then((rs) => {
          plans.value = rs.data;
        })
        .catch((e) => {
          console.log(e);
          $q.notify({ type: "negative", message: "方案加载失败" });
        });
    }

    onMounted(getPlans);
    provide("getPlans", getPlans);
    return {
      plans,
      filter: ref(""),
      newPlan: ref(),
      modifyPlan: ref(),
      cmdName: {
        single: "单机任务",
        multiple: "多机协同任务",
      },
    };
  },
};
</script>
